<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>饼图</title>
		<script type="text/javascript" src="js/echarts.js" ></script>
	</head>
	<body>
		<div id="sales" style="width:600px;height: 400px;"></div>
		<script>
			var myCharts = 
			echarts.init(document.getElementById('sales'));
			var option = {
				title:{
					text:'产品销量',
					left:"center"//最后一行不加，
				},
				tooltip:{
					trigger:'item',
					formatter:'{a} <br/>{b}:{c}({d}%)'
				},
				legend:{
					orient:"vertical",//水平"horizontal"
					left:"left",
					data:['鼠标','键盘','U盘','主板']
				},
				series:[
					{
						name:"所售商品",
						type:"pie",//饼状图
						radius:['50%','80%'],//''不能省
						data:[
							{value:300,name:'鼠标'},
							{value:400,name:'键盘'},
							{value:200,name:'U盘'},
							{value:940,name:'主板'},
						]
					}
				]
			};
			myCharts.setOption(option);
		</script>
	</body>
</html>
